<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/util/jquery-3.4.1.min.js"></script>
    <script src="../js/util/myAjax.js"></script>
    <script src="../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/layui/css/modules/layer/default/layer.css">
</head>
<body>
<div style="text-align: center; font-size: 30px;font-weight: bold;">人员信息</div>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">组号</label>
        <div class="layui-input-block">
            <input name="title" class="layui-input" type="text" placeholder="请输入组号" autocomplete="off" id="number">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">组名</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入组名" autocomplete="off" id="groupname">
        </div>
    </div>
    <div class="layui-form-item">
        <div style="padding-left: 150px">分组信息：</div>
        <div class="demo-transfer" id="test7" style="padding-left: 150px"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">组员</label>
        <div class="layui-input-inline">
            <button class="layui-btn" id="getPersonnel" type="button" lay-demotransferactive="getData">获取分组人员信息</button>
        </div>
        <div class="layui-input-inline" style="width: 500px">
            <input  class="layui-input" type="text" id="groupPersonnel" disabled="disabled" placeholder="此为小组成员名称">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">总人数</label>
        <div class="layui-input-inline">
            <input name="phone" id="groupPersonnelNumber" class="layui-input" type="text" disabled="disabled">
        </div>
        <label class="layui-form-label">小组长</label>
        <div class="layui-input-inline" style="width: 100px;">
            <select name="leaderName" id="leaderName">
            </select>
        </div>
    </div>
</form>
<div style="text-align: center; font-size: 30px"><button class="layui-btn layui-btn-primary layui-btn-lg" onclick="submitGroup()" type="button">提交</button></div>
</body>
<script>
    layui.use(['transfer', 'layer', 'util','form'], function(){
        var $ = layui.$
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,util = layui.util
            ,form = layui.form;
        let data = myAjax('/personnel/nonGroupPersonnel','','post');
        data = data.list;
        let data1 = '[';
        for (let i=0;i<data.length;i++){
            data1+='{"value": "'+data[i].id+'", "title": "'+data[i].name+'"},'
        }
        data1+=']'
        data1 = eval('(' + data1 + ')');
        //模拟数据
        //实例调用
        transfer.render({
            elem: '#test7'
            ,data: data1
            ,height:250
            ,title:['未分组人员', '当前分组人员']
            ,id: 'key123' //定义唯一索引
            ,onchange: function(obj, index){
                let name = '';
                for (var i = 0; i < obj.length; i++) {
                    name+=''+obj[i].title+'；'
                }
                var arr = ['添加人员', '移除人员'];
                layer.alert('<strong>'+ arr[index] + '</strong>：'+name+''); //获得被穿梭时的数据
            }
        })
        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function(othis){
                layui.use('form', function(){
                var form = layui.form;
                getData = transfer.getData('key123'); //获取右侧数据
                let name = '';
                let html='';
                for (let i = 0; i < getData.length; i++) {
                    name+=''+getData[i].title+'；';
                    html+='<option value="' + getData[i].value + '">' + getData[i].title + '</option>';
                }
                $("#groupPersonnel").val(name);
                $("#groupPersonnelNumber").val(getData.length);
                form.render();
                $("#leaderName").html(html);
                // myAjax('/group',getData,'post');
                // layer.alert(JSON.stringify(getData));
                });
            }
        });

    });
    function submitGroup() {
        let groupPersonnel = myAjax('/personnel/selectById',getData,'post');
        let leaderId =[{value:$("#leaderName").val()}];
        let leaderPersonnel = myAjax('/personnel/selectById',leaderId,'post');
        groupPersonnel = groupPersonnel.personnelBean;
        leaderPersonnel = leaderPersonnel.personnelBean;
        let array = [];
        for (let i = 0;i<groupPersonnel.length;i++){
            let data = {
                id: groupPersonnel[i].id,
                groupNumber:$("#number").val(),
                groupName:$("#groupname").val(),
                personnelName:groupPersonnel[i].name,
                personnelSex:groupPersonnel[i].sex,
                personnelPhone:groupPersonnel[i].phone,
                leaderNumber:leaderPersonnel[0].personnelNumber,
                leaderName:leaderPersonnel[0].name,
                count:$("#groupPersonnelNumber").val(),
            }
            array.push(data);
        }
        myAjax('/group/groupAdd',array,'post');
        let groupCode = {
            groupNumber:$("#number").val(),
            groupName:$("#groupname").val(),
            leaderNumber:leaderPersonnel[0].personnelNumber,
            leaderName:leaderPersonnel[0].name,
            count:$("#groupPersonnelNumber").val(),
        }
        console.log(groupCode);
        let result = myAjax('/group/groupCodeAdd',groupCode,'post');
        if (result.result==1){
            alert("添加成功");
        }else {
            alert("添加失败");
        }
    }
</script>
</html>